//功能五：放大镜功能（20分）
$(function() {
        // 获取相关元素的 jQuery 对象
        var $big = $('.big');
        var $mask = $('.mask');
        var $preview_img = $('.preview_zoom');
        var $bigIMg = $('.bigIMg');

        // 当鼠标移入预览图片区域时，显示放大镜和大图容器
        $preview_img.on('mouseover', function () {
            $big.show();
            $mask.show();
        });

        // 当鼠标移出预览图片区域时，隐藏放大镜和大图容器
        $preview_img.on('mouseout', function () {
            $big.hide();
            $mask.hide();
        });

        // 当鼠标在预览图片区域移动时
        $preview_img.on('mousemove', function (e) {
            // 获取鼠标在预览图片区域中的坐标
            var x = e.pageX - $(this).offset().left;
            var y = e.pageY - $(this).offset().top;
            
            

            // 计算放大镜的偏移量
            var maskX = x - $mask.width() / 2;
            var maskY = y - $mask.height() / 2;
            
            

            // 确定放大镜在预览图片区域内的最大偏移量
            var maskMax = $preview_img.width() - $mask.width();

            // 限制放大镜的偏移量在合法范围内
            maskX = Math.max(0, Math.min(maskX, maskMax));
            maskY = Math.max(0, Math.min(maskY, maskMax));

            // 设置放大镜的位置
            $mask.css({ left: maskX, top: maskY });

            // 计算大图中对应位置的偏移量
            var bigMax = $bigIMg.width() - $big.width();
            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;

            // 设置大图的位置
            $bigIMg.css({ left: -bigX, top: -bigY });
        });


})